<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Navigator | Onsen UI</title>
  <link rel="stylesheet" href="../../../../../build/css/onsenui.css"/>
  <link rel="stylesheet" href="../../../../../build/css/onsen-css-components.css"/>

  <script src="../../../../../build/js/onsenui.js"></script>
  <script src="../../../node_modules/angular/angular.js"></script>
  <script src="../../../../../build/js/angular-onsenui.js"></script>

  <script>
    ons.bootstrap();
  </script>

</head>

<body>

  <ons-navigator id="nav" var="myNav" page="page1.html">
  </ons-navigator>

  <ons-template id="page1.html">
    <ons-page>
       <ons-toolbar>
          <div class="left" style="line-height: 44px">
            <ons-back-button ng-show="myNav.pages.length > 1">Back</ons-back-button>
          </div>
          <div class="center">Page 1</div>
        </ons-toolbar>
        <ons-list>
          <ons-list-item onclick="myNav.pushPage('page1.html')">
               Push page1
          </ons-list-item>
           <ons-list-item onclick="myNav.pushPage('page2.html')">
               Push page2
          </ons-list-item>
          <ons-list-item onclick="myNav.bringPageTop('page1.html')">
               Bring page1
          </ons-list-item>
           <ons-list-item onclick="myNav.bringPageTop('page2.html')">
               Bring page2
          </ons-list-item>
      </ons-list>
      <p><input type="text"></p>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-page>
       <ons-toolbar>
         <div class="left">
            <ons-back-button ng-show="myNav.pages.length > 1">Back</ons-back-button>
         </div>
          <div class="center">
            Page 2
         </div>
        </ons-toolbar>
        <ons-list>
          <ons-list-item onclick="myNav.pushPage('page1.html')">
               Push page1
          </ons-list-item>
           <ons-list-item onclick="myNav.pushPage('page2.html')">
               Push page2
          </ons-list-item>
          <ons-list-item onclick="myNav.bringPageTop('page1.html')">
               Bring page1
          </ons-list-item>
           <ons-list-item onclick="myNav.bringPageTop('page2.html')">
               Bring page2
          </ons-list-item>
      </ons-list>
      <p><input type="text"></p>
    </ons-page>
  </ons-template>

</body>
</html>
